<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="查看全部收款卡信息" v-model="visible" append-to-body width="1200px" @close="handleClose">
    <div class="v-title my-3">收款卡信息</div>
    <vxe-table :data="data" class="w-full mb-3">
      <vxe-column title="收款方式" field="collect_type" minWidth="100"></vxe-column>
      <vxe-column title="收款ID" field="receivables_id" minWidth="200"></vxe-column>
      <vxe-column title="收款账号" field="receivables_account" minWidth="100"></vxe-column>
      <vxe-column title="收款币种" field="receivables_currency" minWidth="150"></vxe-column>
    </vxe-table>
  </el-dialog>
</template>

<script setup>
import api from '../api'
const load = ref(false)
const visible = ref(false)
const data = ref([])

const emit = defineEmits(['close'])

// 打开弹窗
const open = async (shop_id) => {
  data.value = []
  if (!load.value) {
    load.value = true
    await 1
  }
  try {
    const res = await api.getCollect({ shop_id })
    data.value = res.data
    visible.value = true
  } catch (error) {
    console.log('error', error)
  }
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>